<template>
	<view class="content">
		<view class="commBox">
			<view class="commList" v-if="commList&&commList.length>0">
				<scroll-view show-scrollbar="false" scroll-y="true" :scroll-top="scrollLeftTop"
					scroll-with-animation="true">
					<view class="commItem" :id="'listItem'+(index+1)" v-for="(item,index) in commList" :key="item.id">
						<view class="topBox">
							<view class="left">
								<view class="avatar">
									<image :src="item.userAvatar" mode=""></image>
								</view>
								<view class="name">
									<!-- {{item.name}} -->我
								</view>
								<view class="dateTime">
									发布于 {{item.createTime}}
								</view>
							</view>

							<view class="operate" @click="openOverlay(item.id,item.postId)">
								删除
							</view>
						</view>
						<!-- <view class="contentTxt">
						{{item.commentDescription}}
					</view> -->
						<view :class="['contentBox',item.isShow === false?'notShow':'']">
							<!-- <view class="text"> -->
							{{item.commentDescription}}

							<view v-if="item.commentDescription.length>80"
								:class="['more',item.isShow=== true?'Showing':'']" @click.stop="changeShow(item,index)">
								{{item.isShow=== true?'收起':'展开'}}
							</view>
						</view>
						<view class="quoteBox" @click="goPostDetail(item.postId,item.isDel)">
							<image class="quoteImg" src="../../static/partner/partner8.png" mode=""></image>
							<view class="imgeBox" v-if="item.photos || item.videoCover">
								<image class="cover" v-if="item.photos" :src="item.photos[0]" mode="aspectFill"></image>
								<image class="cover" v-if="item.videoCover" :src="item.videoCover" mode="aspectFill">
								</image>
								<view class="mark" v-show="item.videoCover">
									
								</view>
								<image v-show="item.videoCover" src="../../static/minePost/play.png" class="play"
									mode="">
								</image>
							</view>
							<view class="quoteTxt">
								{{item.isDel == 1 ? '帖子已被删除':item.text}}

							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="nullData" v-else>
				<image src="../../static/follow/follow1.png" mode="widthFix"></image>
				<view class="txt">
					还没有发评论呢，赶快行动起来~
				</view>
			</view>
		</view>
		<u-overlay :show="modalShow" @click="modalShow = false">
			<view class="warp">
				<!-- <view class="rect" @tap.stop></view> -->
				<view class="followConfirm">
					<view class="txt">
						确认删除评论吗?
					</view>
					<view class="btnGroup">
						<view class="btn cancel" @click="modalShow = false">
							取消
						</view>
						<view class="btn confirm" @click="deleteComm">
							确认
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		getCommentsList
	} from "@/api/comm.js";
	import {
		delComm
	} from "@/api/post.js";
	export default {
		data() {
			return {

				commList: [],
				modalShow: false,
				operateId: '',
				postId: '',
				scrollLeftTop: 0,
				realTop: 0,
			};
		},
		methods: {
			// 展开记录位置，收起滚动回去
			changeShow(item, index) {
				item.isShow = !item.isShow
				console.log(index, 'i')
				let that = this
				const query = uni.createSelectorQuery().in(this);
				if (item.isShow) {
					query.select(`#listItem${index+1}`).boundingClientRect(data => {
						if (data) {
							// data.top就是元素距离顶部的高度
							console.log('元素距离顶部的高度:', data.top);
							that.realTop = data.top
						}
					}).exec();
				} else {
					query.select(`#listItem${index+1}`).boundingClientRect(data => {
						if (data) {
							that.scrollLeftTop = that.realTop
							// console.log(that.scrollLeftTop,'that.scrollLeftTop')
						}
					}).exec();
				}
			},
			goPostDetail(id, state) {
				if (state != 1) {
					uni.navigateTo({
						url: `/pages/postDetail/postDetail?id=${id}`
					})
				} else {
					uni.showToast({
						title: '该贴已被删除',
						icon: 'none',
						duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
						mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
						// image:'./image.png',//自定义图标的本地路径
					});
				}
			},
			deleteComm() {
				delComm({
					id: this.operateId,
					postId: this.postId
				}).then(res => {
					if (res.success) {
						uni.showToast({
							title: '删除成功',
							duration: 2000
						});
						this.modalShow = false
						setTimeout(() => {
							this.getCommList()
						}, 500)
					}
				})
			},
			openOverlay(id, postId) {
				console.log(id, 'idddddddddd')
				this.operateId = id
				this.postId = postId
				this.modalShow = true
			},
			getCommList() {
				getCommentsList().then(res => {
					if (res.success) {
						console.log(res)
						// res.result.map

						res.result.map(item => {
							item.isShow = false
							if (item.isDel != 1) {
								console.log(1212);
								if (item.picture) {
									item.photos = JSON.parse(item.picture)
									// arr.map(item1 => {
									// 	item.text = item.text + '[图片]'
									// })
									// console.log(item.photos, 'res.result.photos')
								}
								if (item.video) {
									// item.text = '[视频]'
									item.videoCover =
										`${item.video}?x-oss-process=video/snapshot,t_1,f_jpg`
									console.log(item.videoCover, 'res.result.videoCover')
								}
							}
						})
						this.commList = res.result
					}
				})
			}
		},
		mounted() {
			// this.getCommList()
		},
		onShow() {
			this.getCommList()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	body {
		// background-color: #F7F7F7;
	}

	.content {
		width: 100%;

		.commBox {
			.commList {
				background-color: #fff;

				.commItem {
					padding: 30rpx;

					.topBox {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;

						.left {
							display: flex;
							align-items: center;
							justify-content: flex-start;

							.avatar {
								width: 70rpx;
								height: 70rpx;
								border-radius: 50%;
								overflow: hidden;

								image {
									width: 100%;
									height: 100%;
									display: block;
								}
							}

							.name {
								margin: 0 20rpx;
								color: #6F6F6F;
							}

							.dateTime {
								color: #C9C9C9;
							}

						}

						.operate {
							color: $uni-text-color-red;
						}
					}

					.contentTxt {
						margin: 30rpx 0;
						letter-spacing: 2rpx;
						line-height: 38rpx;
						font-size: 30rpx;
						word-wrap: break-word;
					}

					.contentBox {
						// .txt{}
						margin: 25rpx 0 35rpx 0;
						position: relative;
						font-size: 32rpx;
						letter-spacing: 2rpx;
						line-height: 45rpx;
						// word-break: break-all;
						word-break: break-word;



						// // 视频
						// .video_wrap {
						// 	margin: 24rpx 0;
						// 	text-align: center;

						// 	.video-item {
						// 		z-index: 1;
						// 	}
						// }

						.more {
							// display: inline-block;
							position: absolute;
							bottom: 0;
							right: 0;
							background-color: #fff;
							color: #4B7DFF;

							&::before {
								position: absolute;
								right: 100%;
								content: "";
								width: 142rpx;
								height: 44rpx;
								background-image: linear-gradient(270deg, #fff, hsla(0, 0%, 100%, 0.2));
							}
						}

						.Showing {
							position: inherit;

							&::before {
								position: inherit;
								content: "";
								width: 0;
								height: 0;
								background-image: none;
							}
						}
					}

					.notShow {
						// height: 300rpx;
						// overflow: hidden;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 4;
						-webkit-box-orient: vertical;
						// word-break: break-all;
						word-break: break-word;



					}

					.quoteBox {
						padding: 35rpx 35rpx 35rpx 60rpx;
						border-radius: 20rpx;
						background-color: #F7F7F7;
						color: #333333;
						position: relative;
						display: flex;
						align-items: flex-start;
						justify-content: space-between;

						.quoteTxt {
							/* 1、转换为块级元素 */
							display: block;
							/* 2、强制在一行显示 */
							white-space: nowrap;
							/* 3、超出的部分隐藏 */
							overflow: hidden;
							/* 4、用省略号代替 */
							text-overflow: ellipsis;
							width: calc(100% - 140rpx);
						}

						.quoteImg {
							position: absolute;
							left: 10rpx;
							top: 10rpx;
							width: 30rpx;
							height: 30rpx;
							display: block;
						}

						.imgeBox {
							width: 120rpx;
							height: 120rpx;
							position: relative;

							.cover {
								width: 100%;
								height: 100%;
								display: block;
								border-radius: 10rpx;
							}
							.mark{
								position: absolute;
								top: 0;
								bottom: 0;
								left: 0;
								right: 0;
								width: 100%;
								height: 100%;
								margin: auto;
								display: block;
								background-color: rgba(0, 0, 0, 0.2);
								border-radius: 10rpx;
							}

							.play {
								position: absolute;
								left: 0;
								bottom: 0;
								right: 0;
								top: 0;
								margin: auto;
								width: 60rpx;
								height: 60rpx;
							}
						}
					}
				}
			}

			.nullData {
				width: 100%;
				padding-top: 300rpx;

				image {
					width: 35%;
					margin: 0 auto;
					display: block;
				}

				.txt {
					text-align: center;
					color: #8C8EA0;
					font-size: 30rpx;
					margin-top: 20rpx;
				}
			}
		}

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.followConfirm {
				width: 70%;
				// height: 250rpx;
				padding: 45rpx 45rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;

				.txt {
					text-align: center;
					margin-bottom: 45rpx;
				}

				.btnGroup {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.btn {
						padding: 18rpx 0rpx;
						border-radius: 35rpx;
						border: 0;
						font-size: 26rpx;
						width: 46%;
						text-align: center;
					}

					.cancel {
						background-color: #EDEDED;
						color: #4D4D4D;
					}

					.confirm {
						background-image: linear-gradient(to right, #FF4C6E, #FE2C55);
						color: #fff;
					}
				}
			}
		}
	}
</style>